<template lang='jade'>
.div
  .map-area
    .map-area-container
      img.map(:src="mapImg", alt="map.png")
      .america(@mouseover="mapHover('america')", @mouseout="initMap()")
      .internation(@mouseover="mapHover('internation')", @mouseout="initMap()")
      .europe(@mouseover="mapHover('europe')", @mouseout="initMap()")
      .asia(@mouseover="mapHover('asia')", @mouseout="initMap()")
  .match-area
    .match-area-league
      .match-area-name 联赛
      .match-area-league-list
        league-item(v-for="(league, index) in leagues", :league="league", :callback="openLeague")
    .match-area-cup
      .match-area-name 盃赛
      .match-area-cup-list
        cup-item(v-for="(cup, index) in cups", :cup="cup", :callback="openCup")
</template>

<script>
import leagueItem from 'components/leagueItem.vue'
import cupItem from 'components/cupItem.vue'
import constants from 'constants'

import baseMap from 'images/base-map.png'
import americaMap from 'images/america-map.png'
import asiaMap from 'images/asia-map.png'
import europeMap from 'images/europe-map.png'
//没有国际赛事的地图切图
import internationMap from 'images/europe-map.png'

export default {
	name: 'home',
	components: {
		leagueItem,
    cupItem
	},
  data(){
    return {
      leagues: constants.LEAGUES,
      cups: constants.CUPS,
      mapImg: baseMap
    }
  },
  created(){
    
  },
  mounted(){
    let self = this
    // $('.america, .asia, .internation, .europe').mouseout(()=>{
    //   console.log('离开了')
    //   // self.mapImg = baseMap
    // })
  },
  methods: {
    mapHover(active) {
      let self = this
      console.log("鼠标滑到了这个=>"+active)
      switch(active){
        case 'america':
          self.mapImg = americaMap
          break
        case 'europe':
          self.mapImg = europeMap
          break
        case 'asia':
          self.mapImg = asiaMap
          break
        case 'internation':
          self.mapImg = internationMap
          break
        default:
          break
      }
    },
    initMap() {
      let self = this
      self.mapImg = baseMap
    },
    openLeague(league){
      let self = this
      console.log(league)
    },
    openCup(cup){
      let self = this
      console.log(cup)
    }
  }
  
}
</script>

<style lang="less" scoped>
  .map-area{
    position: relative;
    width: 100%;
    height: 300pt;
    &-container{
      width: 533pt;
      height: 265pt;
      position: relative;
      top: 30pt;
      left: 0;
      right: 0;
      margin: auto;
      overflow: hidden;
    }
    .map{
      position: absolute;
      top: -120px;
      left: -100px;
      width: 900px;
      z-index: 1;
    }
    .america, .europe, .internation, .asia{
      width: 50.8pt;
      height: 59pt;
      position: absolute;
      z-index: 2;
    }
    .america{
      top: 126px;
      left: 130px;
      background: url(../../images/america.png) no-repeat;
      background-size: cover;
      &:hover{
        background: url(../../images/europe.png) no-repeat;
        background-size: cover;
      }
    }
    .asia{
      top: 85px;
      right: 175px;
      background: url(../../images/asia.png) no-repeat;
      background-size: cover;
      &:hover{
        background: url(../../images/europe.png) no-repeat;
        background-size: cover;
      }
    }
    .europe{
      left: 300px;
      top: 48px;
      background: url(../../images/america.png) no-repeat;
      background-size: cover;
      &:hover{
        background: url(../../images/europe.png) no-repeat;
        background-size: cover;
      }
    }
    .internation{
      left: 230px;
      top: 135px;
      background: url(../../images/internation.png) no-repeat;
      background-size: cover;
      &:hover{
        background: url(../../images/europe.png) no-repeat;
        background-size: cover;
      }
    }
  }
  .match-area{
    position: relative;
    width: 648pt;
    height: 300pt;
    top: 20pt;
    left: 0;
    right: 0;
    margin: auto;
    border-top: 1px solid #FFDC00;
    box-sizing: border-box;
    &-name{
      color: #fff;
      font-size: 12pt;
      height: 33.8pt;
      line-height: 33.8pt;
    }
    &-league{
      position: relative;
      width: 433pt;
      height: 300pt;
      float: left;
      box-sizing: border-box;
      &-list{
        position: absolute;
        width: 433pt;
        height: 260pt;
        overflow: auto;
        left: 0;
        box-sizing: border-box;
      }
    }
    &-cup{
      position: relative;
      padding-left: 17.5pt;
      width: 210pt;
      height: 300pt;
      float: right;
      border-left: 1px solid #FFDC00;
      box-sizing: border-box;
      &-list{
        position: absolute;
        width: 210pt;
        height: 260pt;
        overflow: auto;
        box-sizing: border-box;
      }
    }
    
  }
</style>
